<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head('搜索文章')">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../../static/layui/layui.css" rel="stylesheet">
    <link href="../../static/css/myui.css" rel="stylesheet">
    <link href="../../static/css/preview.css" rel="stylesheet">
    <script src="../../static/layui/layui.js"></script>
    <script src="../../static/jquery/jquery-3.7.1.min.js"></script>
</head>
<body>

<div style="background: rgb(47,54,60)" th:replace="_fragment::navigate(${user}, 0)">
    <div class="layui-container" style="display:flex;position: relative">
        <div class="myui-logo-container">
            <img style="width: 80%;height: 80%;border-radius: 5px" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
        </div>
        <ul class="layui-nav" style="margin-left: -10px">
            <li class="layui-nav-item">
                <a href="" class="layui-font-18" style="">话题</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">文章</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Gitee</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Github</a>
            </li>
        </ul>
        <div style="position: absolute;right: 50px;margin-top: 10px">
            <div style="display: flex">
                <a class="layui-btn" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    登录</a>
                <button class="layui-btn" id="post-button" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    发表</button>
                <a href="javascript:;" class="myui-font-color-gray" id="user-info">
                    <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" style="border-radius: 50%;width: 35px;height: 35px ">
                    <span class="layui-font-14" style="color: whitesmoke">小小可小可小可小可小可可</span>
                    <i class="layui-icon layui-icon-down" style="color: whitesmoke"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="layui-container" style="margin-top: 10px;">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card" style="padding: 15px;display: block">
                <div class="layui-row layui-font-16" style="display: flex;padding: 20px">
                    "<h4 th:text="${searchKey}">123</h4>"&nbsp;&nbsp;搜索结果
                </div>
                <div class="layui-row">
                    <div class=" layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li>
                                <a th:href="@{'/index/search?type=user&key=' + ${searchKey}}">用户</a>
                            </li>
                            <li class="layui-this">
                                <a>文章</a>
                            </li>
                            <li>
                                <a th:href="@{'/index/search?type=topic&key=' + ${searchKey}}">话题</a>
                            </li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item"></div>
                            <!--                        文章搜索-->
                            <div class="layui-tab-item layui-show">
                                <div class="layui-card myui-card"  th:each="article,stat : ${searchArticles}" style="padding: 12px 8px;display: flex;position: relative">
                                    <div style="display: block;width: 100%">
                                        <a class="layui-row layui-font-18 myui-article-title" th:href="@{'/article/' + ${article.id}}" th:text="${article.title}">如何选择合适软件开发语言-本增效和软件性能推荐G兼顾降本增效和软件性能推荐Go语言</a>
                                        <div th:text="${article.preview}" class="layui-row myui-font-color-gray" style="line-height: 24px!important;margin-top: 8px;cursor: pointer; display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;text-align: justify;text-overflow: ellipsis"></div>
                                        <div class="layui-row" style="margin-top: 10px;display: flex">
                                            <span style="font-weight: bold;color: #04a99a;cursor: pointer" th:text="${article.nickname}">dererrker</span>
                                            <span class="myui-font-color-gray layui-font-12">&nbsp;发布于&nbsp;</span>
                                            <span class="myui-font-color-gray layui-font-12" style="line-height: 18px" th:text="${#dates.format(article.createTime, 'yyyy-MM-dd HH:mm:ss')}">2023-23-12 12:12:12</span>
                                            <div style="margin-left: 5px;max-width: 70%;">
                                                <span th:each="tag,stat : ${#thJson.parseStringArray(article.tags)}" th:text="${tag}" th:if="${stat.index < 3}" class="myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray">开撒但是是的武器大全源</span>
                                                <!--                            <span class="myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray">开撒但是是的武器大全源</span>-->
                                                <!--                            <span class="myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray">开撒但是是的武器大全源</span>-->
                                            </div>
                                        </div>
                                    </div>
                                    <div style="margin-left: 10px;width: 200px;height: 110px;display: flex;justify-content: center;align-items: center;position: relative;right: 0">
                                        <img style="max-width: 100%;max-height: 100%;object-fit: cover" th:src="@{${article.cover}}" th:if="${#strings.isEmpty(article.cover) == false}" src="https://file.mlog.club/images/2024/02/26/4f4bfcbe81542c5687dfcf1a2e3d39d6.png">
                                    </div>
                                </div>
                                <div class="layui-row" style="justify-content: center;display: flex" id="load-more-btn-area">
                                    <button th:classappend="${#lists.size(searchArticles) < 5 ? 'myui-hide' : ''}" id="load-more-btn" class="layui-btn layui-btn-xs">点击加载更多</button>
                                    <button th:classappend="${#lists.size(searchArticles) >= 5 ? 'myui-hide' : ''}" id="load-all" class="layui-btn layui-btn-xs layui-btn-primary">已经到底咯~</button>
                                </div>
                            </div>
                            <div class="layui-tab-item">话题</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-md3">
            <th:block th:replace="_fragment::checkPanel(${dailyCheck}, ${checkUsers}, ${user})"></th:block>

            <div class="layui-card">
                <div class="layui-card-header myui-side-title">公告</div>
                <div class="layui-card-body">
                    欢迎访问kkblog开发社区，目前属于demo版本，欢迎注册留言
                </div>
            </div>

            <div class="layui-card myui-side-card">
                <div class="layui-card-header myui-side-title">积分排行</div>
                <div class="layui-card-body">
                    <div class="layui-row" style="margin-bottom: 5px" th:each="u,stat:${ranks}">
                        <div class="layui-col-md2" style="padding-top: 1%">
                            <img class="myui-avatar-small" style="margin: auto;display: block" th:onclick="|window.location.href='/user/' + ${u.id}|" th:src="@{${u.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                        </div>
                        <div class="layui-col-md7" style="text-align: left">
                            <a class="layui-row layui-font-14 myui-a-tag" th:href="@{'/user/' + ${u.id}}" th:text="${u.nickname}">秋天的落叶</a>
                            <div class="layui-row layui-font-12" style="color: #6c6c70"><span th:text="${u.dynamicNumber}">212</span> 帖子 • <span th:text="${u.commentNumber}">12</span> 评论</div>
                        </div>
                        <div class="layui-col-md3 layui-font-14" style="display: flex;padding-top: 2%;color: #6c6c70">
                            <i class="layui-icon layui-icon-dollar" style="font-size: 14px"></i>&nbsp;
                            <span th:text="${u.scores}">32212</span>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row" style="margin-top: 30px;margin-bottom: 20px;text-align: center;color: darkgrey" th:replace="_fragment::footer">
    © 2024 Powered by Derek
</div>

</body>
</html>

<script th:inline="javascript">
    <!--/*/
     let articles = [[${searchArticles}]];
     let searchKey = [[${searchKey}]]
    /*/-->;

    $(document).ready(function () {
        // 初始话搜索框
        $('#search-key').val(searchKey);
        $('#search-type').val('article');

        $('#load-more-btn').on('click', function () {
            let articleId = articles[articles.length - 1].id
            $.get('/index/search/more/?type=article&lastId=' + articleId + '&key=' + searchKey, function(res) {
                if (res.code === 200) {
                    articles = res.data;
                    let html = ""
                    for(let i = 0; i < res.data.length; i++) {
                        html += genArticleHtml(res.data[i])
                    }
                    $('#load-more-btn-area').before(html)
                    if (res.data.length < 5) {
                        $('#load-more-btn').addClass('myui-hide')
                        $('#load-all').removeClass('myui-hide')
                    }
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        })
    })

    let genArticleHtml = function (article) {
        let coverHtml = "";
        if (article.cover !== null && article.cover !== "") {
            coverHtml =
                "        <div style='margin-left: 10px;width: 200px;height: 110px;display: flex;justify-content: center;align-items: center;position: relative;right: 0'>" +
                "            <img style='max-width: 100%;max-height: 100%;object-fit: cover' src='" + article.cover + "'>" +
                "        </div>";
        }
        let tagsHtml = "";
        if (article.tags !== '') {
            let tags = JSON.parse(article.tags);
            for (let i = 0; i < tags.length; i++) {
                if (i > 2) {
                    break;
                }
                tagsHtml +=
                    "<span  class='myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray'>" + tags[i] + "</span>";
            }
        }
        return "<div class='layui-card myui-card' style='padding: 12px 8px;display: flex;position: relative'>" +
            "        <div style='display: block;width: 100%'>" +
            "            <a class='layui-row layui-font-18 myui-article-title' href='/article/" + article.id + "'>" + article.title + "</a>" +
            "            <div class='layui-row myui-font-color-gray' style='line-height: 24px!important;margin-top: 8px;cursor: pointer; display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;text-align: justify;text-overflow: ellipsis'>" +
            article.preview +
            "            </div>" +
            "            <div class='layui-row' style='margin-top: 10px;display: flex'>" +
            "                <span style='font-weight: bold;color: #04a99a;cursor: pointer'>" + article.nickname + "</span>" +
            "                <span class='myui-font-color-gray layui-font-12'>&nbsp;发布于&nbsp;</span>" +
            "                <span class='myui-font-color-gray layui-font-12' style='line-height: 18px'>" + article.createTime + "</span>" +
            "                <div style='margin-left: 5px;max-width: 70%;'>" +
            tagsHtml +
            "                </div>" +
            "            </div>" +
            "        </div>" +
            coverHtml +
            "    </div>"
    }
</script>